{% extends "base.html" %}

{% block body %}

<ol class="breadcrumb">
  <li>设置</li>
  <li class="active">账户</li>
</ol>

<div class="page-header">
    <h2>
      账户
    </h2>
</div>


<table class="table table-hover">
<caption>
<form class="form-inline" style="float: right;" action="/account/my_account" method="post">
 {% csrf_token %}
  <div class="form-group">
    <p class="form-control-static">
        <select class="form-control" name="filter_select">
          <option>用户名</option>
          <option>邮箱</option>
          <option>描述</option>
        </select>
    </p>
    <input type="text" class="form-control" name="filter_keyword" placeholder="">
  </div>
  <button type="submit" class="btn btn-default"><span class="fa fa-filter"></span> 过滤</button>
  <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    更多 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">编辑</a></li>
    <li><a href="#">更改密码</a></li>
    <li><a href="#">其他</a></li>
  </ul>
</div>
</form>
</caption>

    <tr>
        <td colspan="12" data-column="0">
            <span class="table_count">显示 1 / 1 项</span>
        </td>
    </tr>
    <tr class="active">
        <th><input type="checkbox" name="check_all" id="check_all" onclick="checkAll()"></th>
        <th width="10%">用户名</th>
        <th width="30%">邮箱</thw>
        <th width="20%">上次登录</th>
        <th width="25%">描述</th>
        <th colspan="4" width="15%">行为</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="check_item"></td>
        <td>{{ user_info.username }}</td>
        <td>{{ user_info.email }}</td>
        <td>{{ user_info.last_login }}</td>
        <td>{{ user_info.description }}</td>
        <td>
 
          <!-- Split button -->
          <div class="btn-group">
            <a type="button" class="btn btn-default btn-sm" href="javascript:;" onclick="#">编辑</a>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="/account/password_change?username={{user_info.username}}">更改密码</a></li>
            </ul>
          </div>
        </td>

    </tr>
    <tr>
        <td colspan="12" data-column="0">
            <span class="table_count">显示 1 /1 项</span>
        </td>
    </tr>
</table>


<script> 
//复选框的全选、取消全选功能
function checkAll() {
var all=document.getElementById('check_all');//获取到点击全选的那个复选框的id
var one=document.getElementsByName('check_item');//获取到复选框的名称
//因为获得的是数组，所以要循环 为每一个checked赋值
for(var i=0;i<one.length;i++){
one[i].checked=all.checked; //赋值
}
}
</script>
{% endblock %}